<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>广告管理</title>
    <link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css">
    <script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        /*鼠标放上小手标志*/
        font {
            cursor: pointer;
        }

        button {
            cursor: pointer;
        }
    </style>
</head>
<body>

<script type="text/html" id="zizeng">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" onclick="addBanner()">添加广告</button>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>
<!-- 操作指令 -->
<script type="text/html" id="barDemo">
    <a lay-event="edit">
        <font color="#0000FF">编辑</font>
    </a>
    <a>|</a>
    <a lay-event="del">
        <font color="red">删除</font>
    </a>
</script>


<script src="../static/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test',
            url: '/selBanners',
            title: '用户数据表',
            cols: [
                [{
                    type: 'checkbox',
                    fixed: 'left'
                }, {
                    field: 'zizeng',
                    width: 220,
                    title: '序号',
                    templet: '#zizeng'
                }, {
                    field: 'bannerId',
                    title: 'ID',
                    hide: true
                }, {
                    field: 'bannerSort',
                    title: '排序',
                    width: 200
                }, {
                    field: 'bannerUrl',
                    title: '图片',
                    width: 305,
                    templet: function (object) {
                        return '<div style="text-align: center"><img src="'+object.bannerUrl +'" style=" max-width:300px;height: auto" >';
                    }
                }, {
                    field: 'bannerPath',
                    title: '链接地址',
                    width: 260
                }, {
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#barDemo',
                    width: 250
                }]
            ],
            page: true,
            height: 515,
        });
        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') { //删除
                var flag = confirm("您确定要删除吗？");
                if (flag) {
                    $.ajax({
                        type: "post",
                        url: '/delBanners',
                        dataType: "json",
                        data: {
                            id: data.bannerId
                        },
                        success: function (data) {
                            if (data.code == 0) {
                                layer.msg("删除成功", {
                                    icon: 6
                                }, function () {
                                    location.reload()
                                });
                            } else {
                                layer.alert("删除失败")
                            }
                        }
                    })
                }
            } else if (obj.event === 'edit') { //编辑按钮
                window.location.href = "/addBanner?id="+data.bannerId;

            }
        });
    });
</script>
<script>
    function addBanner() {
        window.location.href = "/addBanner";
    }
</script>

</body>
</html>
